<template>
    <div class="login-container">
        <div class="login-banner">
            <div class="banner-content">
                <h1>校园二手交易平台</h1>
                <p>连接校园资源，让闲置物品焕发新生，创造可持续的校园生态圈</p>
                
                <div class="banner-features">
                    <div class="feature-item">
                        <i class="el-icon">
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" />
                            </svg>
                        </i>
                        <div class="feature-text">
                            <h3>安全可靠</h3>
                            <p>校园实名认证，100%买卖双方身份验证，杜绝欺诈风险，创造安全交易环境</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <i class="el-icon">
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm67.744 256.128-67.744 12.8-67.744-12.8a64 64 0 1 0-128 0v448a64 64 0 0 0 64 64h267.488a64 64 0 0 0 64-64v-448a64 64 0 0 0-128 0h-4zM256 832h512v-448H256v448zm256-512c22.336 0 40.96-18.048 40.96-40.96s-18.624-40.96-40.96-40.96-40.96 18.048-40.96 40.96 18.624 40.96 40.96 40.96z" />
                            </svg>
                        </i>
                        <div class="feature-text">
                            <h3>便捷交易</h3>
                            <p>智能匹配同校交易，省去物流烦恼，面对面交易更高效，省时又省力</p>
                        </div>
                    </div>
                    <div class="feature-item">
                        <i class="el-icon">
                            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                                <path fill="currentColor" d="M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z" />
                                <path fill="currentColor" d="M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z" />
                                <path fill="currentColor" d="M544 384h96a32 32 0 1 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96z" />
                            </svg>
                        </i>
                        <div class="feature-text">
                            <h3>精准定位</h3>
                            <p>基于地理位置和学校智能推荐，快速找到周边商品，让交易更加便捷高效</p>
                        </div>
                    </div>
                </div>
                
                <div class="action-prompt">
                    <h4>已有超过50,000名学生加入我们</h4>
                    <p>立即登录，开始您的校园二手交易之旅</p>
                </div>
                
                <div class="banner-illustration"></div>
            </div>
        </div>
        
        <div class="login-content">
            <div class="forms-container">
                <!-- 登录表单 -->
                <div class="login-box" :class="{ 'slide-out': showRegister || showForgotPassword }">
                <div class="login-header">
                    <div class="logo">
                        <img src="../assets/logo.svg" alt="Logo" />
                    </div>
                    <h2>欢迎回来</h2>
                    <p class="subtitle">登录您的账号</p>
                </div>
                    <el-form ref="loginFormRef" :model="formData" :rules="rules" :hide-required-asterisk="!loginValidated" :validate-on-rule-change="false" label-position="top" class="login-form">
                        <div class="modern-input-container">
                            <label class="modern-label">您的学校</label>
                            <div class="modern-select-wrapper">
                                <div class="icon-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="school-icon">
                                        <path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z" fill="currentColor"/>
                                    </svg>
                                </div>
                        <el-select 
                            v-model="formData.school" 
                            placeholder="请选择学校" 
                                    class="modern-school-select"
                            filterable
                                    popper-class="modern-select-dropdown"
                                    @focus="handleSelectFocus"
                                    @blur="handleSelectBlur"
                        >
                            <el-option
                                v-for="item in schoolOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                        class="custom-option"
                            />
                        </el-select>
                            </div>
                        </div>

                    <el-form-item prop="username">
                            <el-input 
                                v-model="formData.username" 
                                placeholder="请输入用户名" 
                                :prefix-icon="User"
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                    </el-form-item>

                    <el-form-item prop="password">
                            <el-input 
                                v-model="formData.password" 
                                type="password" 
                                placeholder="请输入密码" 
                                :prefix-icon="Lock"
                                show-password 
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                    </el-form-item>

                    <div class="form-actions">
                        <el-checkbox v-model="rememberMe" class="custom-checkbox">记住我</el-checkbox>
                            <el-link type="primary" class="forgot-link" @click="toggleForgotPassword">忘记密码？</el-link>
                    </div>

                        <el-button 
                            type="primary" 
                            :loading="loading" 
                            class="submit-btn" 
                            @click="handleLogin"
                            @mouseenter="btnHoverStart"
                            @mouseleave="btnHoverEnd"
                        >
                        {{ loading ? '登录中...' : '登 录' }}
                    </el-button>

                        <div class="register-link">
                            还没有账号？
                            <el-link type="primary" @click="toggleForm" class="register-btn">立即注册</el-link>
                        </div>
                    </el-form>
                    </div>

                <!-- 注册表单 -->
                <div class="register-box" :class="{ 'slide-in': showRegister && !showForgotPassword }">
                    <div class="login-header">
                        <div class="logo">
                            <img src="../assets/logo.svg" alt="Logo" />
                        </div>
                        <h2>用户注册</h2>
                        <p class="subtitle">创建您的账号</p>
                    </div>
                    <el-form ref="registerFormRef" :model="registerData" :rules="registerRules" :hide-required-asterisk="!registerValidated" :validate-on-rule-change="false" label-position="top" class="login-form">
                        <div class="modern-input-container">
                            <label class="modern-label">您的学校</label>
                            <div class="modern-select-wrapper">
                                <div class="icon-container">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="school-icon">
                                        <path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm6.82 6L12 12.72 5.18 9 12 5.28 18.82 9zM17 15.99l-5 2.73-5-2.73v-3.72L12 15l5-2.73v3.72z" fill="currentColor"/>
                                    </svg>
                                </div>
                                <el-select 
                                    v-model="registerData.school" 
                                    placeholder="请选择学校" 
                                    class="modern-school-select"
                                    filterable
                                    popper-class="modern-select-dropdown"
                                    @focus="handleSelectFocus"
                                    @blur="handleSelectBlur"
                                >
                                    <el-option
                                        v-for="item in schoolOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        class="custom-option"
                                    />
                                </el-select>
                            </div>
                    </div>

                        <el-form-item prop="username">
                            <el-input 
                                v-model="registerData.username" 
                                placeholder="请输入用户名" 
                                :prefix-icon="User"
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input 
                                v-model="registerData.password" 
                                type="password" 
                                placeholder="请输入密码" 
                                :prefix-icon="Lock"
                                show-password 
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="confirmPassword">
                            <el-input 
                                v-model="registerData.confirmPassword" 
                                type="password" 
                                placeholder="请再次输入密码" 
                                :prefix-icon="Lock"
                                show-password 
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="phone">
                            <el-input 
                                v-model="registerData.phone" 
                                placeholder="请输入手机号码" 
                                :prefix-icon="Phone"
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="code">
                            <div class="code-input">
                                <el-input 
                                    v-model="registerData.code" 
                                    placeholder="请输入验证码" 
                                    :prefix-icon="Key"
                                    class="custom-input" 
                                    @focus="handleInputFocus" 
                                    @blur="handleInputBlur"
                                />
                                <el-button 
                                    type="primary" 
                                    :disabled="countdown > 0" 
                                    @click="handleSendCode('register')"
                                    class="verify-btn"
                                >
                                    {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
                                </el-button>
                            </div>
                        </el-form-item>

                        <el-button 
                            type="primary" 
                            :loading="registerLoading" 
                            class="submit-btn" 
                            @click="handleRegister"
                            @mouseenter="btnHoverStart"
                            @mouseleave="btnHoverEnd"
                        >
                            {{ registerLoading ? '注册中...' : '注 册' }}
                        </el-button>

                    <div class="register-link">
                            已有账号？
                            <el-link type="primary" @click="toggleForm" class="login-btn">立即登录</el-link>
                    </div>
                </el-form>
            </div>

                <!-- 忘记密码表单 -->
                <div class="forgot-box" :class="{ 'slide-in': showForgotPassword }">
                    <div class="login-header">
                        <div class="logo">
                            <img src="../assets/logo.svg" alt="Logo" />
                        </div>
                        <h2>找回密码</h2>
                        <p class="subtitle">重置您的账号密码</p>
                    </div>
                    <el-form ref="forgotPasswordFormRef" :model="forgotPasswordData" :rules="forgotPasswordRules" :hide-required-asterisk="true" :validate-on-rule-change="false" label-position="top" class="login-form">
                        <el-form-item prop="phone">
                            <el-input 
                                v-model="forgotPasswordData.phone" 
                                placeholder="请输入手机号码" 
                                :prefix-icon="Phone"
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="code">
                            <div class="code-input">
                                <el-input 
                                    v-model="forgotPasswordData.code" 
                                    placeholder="请输入验证码" 
                                    :prefix-icon="Key"
                                    class="custom-input" 
                                    @focus="handleInputFocus" 
                                    @blur="handleInputBlur"
                                />
                                <el-button 
                                    type="primary" 
                                    :disabled="countdown > 0" 
                                    @click="handleSendCode('forgot')"
                                    class="verify-btn"
                                >
                                    {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
                                </el-button>
                            </div>
                        </el-form-item>

                        <el-form-item prop="newPassword">
                            <el-input 
                                v-model="forgotPasswordData.newPassword" 
                                type="password" 
                                placeholder="请输入新密码" 
                                :prefix-icon="Lock"
                                show-password 
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-form-item prop="confirmPassword">
                            <el-input 
                                v-model="forgotPasswordData.confirmPassword" 
                                type="password" 
                                placeholder="请再次输入新密码" 
                                :prefix-icon="Lock"
                                show-password 
                                class="custom-input" 
                                @focus="handleInputFocus" 
                                @blur="handleInputBlur"
                            />
                        </el-form-item>

                        <el-button 
                            type="primary" 
                            :loading="forgotPasswordLoading" 
                            class="submit-btn" 
                            @click="handleResetPassword"
                            @mouseenter="btnHoverStart"
                            @mouseleave="btnHoverEnd"
                        >
                            {{ forgotPasswordLoading ? '提交中...' : '重置密码' }}
                        </el-button>

                        <div class="register-link">
                            想起密码了？
                            <el-link type="primary" @click="backToLogin" class="login-btn">返回登录</el-link>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Phone, Key } from '@element-plus/icons-vue'
import { useUserStore } from '../stores/user'
import type { FormInstance, FormRules } from 'element-plus'
import { sendVerificationCode, register as apiRegister, resetPassword as apiResetPassword } from '../api/user'
import { getSchools, type School } from '../api/school'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const loginFormRef = ref<FormInstance>()
const registerFormRef = ref<FormInstance>()
const loading = ref(false)
const registerLoading = ref(false)
const rememberMe = ref(false)
const activeInput = ref('')
const showRegister = ref(false)
const countdown = ref(0)
const loginValidated = ref(false)
const registerValidated = ref(false)
const showForgotPassword = ref(false)

const formData = reactive({
    school: '',
    username: '',
    password: ''
})

const registerData = reactive({
    school: '',
    username: '',
    password: '',
    confirmPassword: '',
    phone: '',
    code: ''
})

const forgotPasswordData = reactive({
    phone: '',
    code: '',
    newPassword: '',
    confirmPassword: ''
})

// 学校选项，初始为空数组，将通过API加载
const schoolOptions = ref<{ value: string | number, label: string }[]>([])
const schoolsLoading = ref(false)

const rules = {
    school: [
        { required: true, message: '请选择学校', trigger: 'change' }
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'none' },
        { min: 3, message: '用户名长度不能小于3个字符', trigger: 'none' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'none' },
        { min: 6, message: '密码长度不能小于6个字符', trigger: 'none' }
    ]
}

const validatePass = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (value.length < 6) {
        callback(new Error('密码长度不能小于6个字符'))
    } else {
        if (registerData.confirmPassword !== '' && registerValidated.value) {
            registerFormRef.value?.validateField('confirmPassword')
        }
        callback()
    }
}

const validatePass2 = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerData.password) {
        callback(new Error('两次输入密码不一致'))
    } else {
        callback()
    }
}

const validatePassForgot = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    } else if (value.length < 6) {
        callback(new Error('密码长度不能小于6个字符'))
    } else {
        if (forgotPasswordData.confirmPassword !== '') {
            forgotPasswordFormRef.value?.validateField('confirmPassword')
        }
        callback()
    }
}

const validatePass2Forgot = (rule: any, value: string, callback: Function) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== forgotPasswordData.newPassword) {
        callback(new Error('两次输入密码不一致'))
    } else {
        callback()
    }
}

const registerRules: FormRules = {
    school: [
        { required: true, message: '请选择学校', trigger: 'change' }
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'none' },
        { min: 3, message: '用户名长度不能小于3个字符', trigger: 'none' }
    ],
    password: [
        { required: true, validator: validatePass, trigger: 'none' }
    ],
    confirmPassword: [
        { required: true, validator: validatePass2, trigger: 'none' }
    ],
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'none' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'none' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'none' },
        { len: 6, message: '验证码长度应为6位', trigger: 'none' }
    ]
}

const forgotPasswordRules: FormRules = {
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'none' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'none' }
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'none' },
        { len: 6, message: '验证码长度应为6位', trigger: 'none' }
    ],
    newPassword: [
        { required: true, validator: validatePassForgot, trigger: 'none' }
    ],
    confirmPassword: [
        { required: true, validator: validatePass2Forgot, trigger: 'none' }
    ]
}

const forgotPasswordFormRef = ref<FormInstance>()
const forgotPasswordLoading = ref(false)

const handleInputFocus = (event: any) => {
    const inputEl = event.target.closest('.el-input');
    if (inputEl) {
        inputEl.classList.add('input-focus-animate');
        activeInput.value = event.target.name;
    }
}

const handleInputBlur = (event: any) => {
    const inputEl = event.target.closest('.el-input');
    if (inputEl) {
        inputEl.classList.remove('input-focus-animate');
        activeInput.value = '';
    }
}

const handleSelectFocus = (event: any) => {
    const selectWrapper = event.target.closest('.modern-select-wrapper');
    if (selectWrapper) {
        selectWrapper.classList.add('select-focus-animate');
    }
}

const handleSelectBlur = (event: any) => {
    const selectWrapper = event.target.closest('.modern-select-wrapper');
    if (selectWrapper) {
        selectWrapper.classList.remove('select-focus-animate');
    }
}

const btnHoverStart = () => {
    document.querySelector('.submit-btn')?.classList.add('btn-hover');
}

const btnHoverEnd = () => {
    document.querySelector('.submit-btn')?.classList.remove('btn-hover');
}

const toggleForm = () => {
    loginValidated.value = false;
    registerValidated.value = false;
    showForgotPassword.value = false;
    showRegister.value = !showRegister.value;
}

const toggleForgotPassword = () => {
    loginValidated.value = false;
    registerValidated.value = false;
    showForgotPassword.value = true;
    showRegister.value = false;
}

const backToLogin = () => {
    showForgotPassword.value = false;
    showRegister.value = false;
}

const handleSendCode = async (type = 'register') => {
    const phoneData = type === 'register' ? registerData.phone : forgotPasswordData.phone;
    
    if (!phoneData) {
        ElMessage.warning('请输入手机号码')
        return
    }

    try {
        const response = await sendVerificationCode(phoneData, type as 'register' | 'reset')
        if (response.code === 200) {
            countdown.value = 60
            const timer = setInterval(() => {
                countdown.value--
                if (countdown.value <= 0) {
                    clearInterval(timer)
                }
            }, 1000)
            ElMessage({
                message: '验证码已发送',
                type: 'success',
                duration: 4000,
                showClose: true
            })
        }
    } catch (error) {
        console.error('发送验证码失败:', error)
    }
}

const handleLogin = async () => {
    if (!loginFormRef.value) return

    loginValidated.value = true;

    try {
        await loginFormRef.value.validate()
        loading.value = true

        try {
        const success = await userStore.login(formData.username, formData.password, formData.school)
        if (success) {
            ElMessage({
                message: '登录成功',
                type: 'success',
                duration: 4000,
                showClose: true
            })
                router.push(route.query.redirect?.toString() || '/')
            } else {
                // 明确处理登录失败的情况，确保显示错误消息
                ElMessage({
                    message: '登录失败，请检查用户名和密码',
                    type: 'error',
                    duration: 4000,
                    showClose: true
                })
            }
        } catch (error: any) {
            // 显示详细的错误信息
            ElMessage({
                message: error.message || '登录失败，请检查用户名和密码',
                type: 'error',
                duration: 4000,
                showClose: true
            })
        }
    } catch (error) {
        console.error('登录验证失败:', error)
    } finally {
        loading.value = false
    }
}

const handleRegister = async () => {
    if (!registerFormRef.value) return

    registerValidated.value = true;

    try {
        await registerFormRef.value.validate()
        registerLoading.value = true

        const response = await apiRegister({
            username: registerData.username,
            password: registerData.password,
            phone: registerData.phone,
            code: registerData.code,
            school: registerData.school
        })

        if (response.code === 200) {
            localStorage.setItem('lastSchool', registerData.school)
            ElMessage({
                message: '注册成功',
                type: 'success',
                duration: 4000,
                showClose: true
            })
            showRegister.value = false
            formData.school = registerData.school
            formData.username = registerData.username
        }
    } catch (error) {
        console.error('注册验证失败:', error)
    } finally {
        registerLoading.value = false
    }
}

const handleResetPassword = async () => {
    if (!forgotPasswordFormRef.value) return

    try {
        await forgotPasswordFormRef.value.validate()
        forgotPasswordLoading.value = true

        const response = await apiResetPassword({
            phone: forgotPasswordData.phone,
            code: forgotPasswordData.code,
            newPassword: forgotPasswordData.newPassword
        })
        
        if (response.code === 200) {
            ElMessage({
                message: '密码重置成功',
                type: 'success',
                duration: 4000,
                showClose: true
            })
            showForgotPassword.value = false
        }
    } catch (error) {
        console.error('密码重置验证失败:', error)
    } finally {
        forgotPasswordLoading.value = false
    }
}

// 在组件挂载时获取学校列表
onMounted(async () => {
    await loadSchools()
    
    // 尝试从localStorage加载上次选择的学校
    const lastSchool = localStorage.getItem('lastSchool')
    if (lastSchool) {
        formData.school = lastSchool
    }
})

// 加载学校列表的方法
const loadSchools = async () => {
    try {
        schoolsLoading.value = true
        const res = await getSchools()
        if (res.code === 200 && res.data) {
            // 将后端返回的学校数据转换为选择器需要的格式
            schoolOptions.value = res.data.map((school: School) => ({
                value: school.id,
                label: school.name
            }))
        } else {
            ElMessage.warning('获取学校列表失败')
        }
    } catch (error) {
        console.error('获取学校列表出错:', error)
        ElMessage.error('获取学校数据失败，请刷新页面重试')
    } finally {
        schoolsLoading.value = false
    }
}
</script>

<style>
/* 全局样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

#app {
    width: 100%;
    height: 100%;
}
</style>

<style scoped>
.login-container {
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    display: flex;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    touch-action: none;
}

.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.15) 0%, transparent 50%);
    animation: gradientMove 15s ease infinite;
    z-index: 1;
}

@keyframes gradientMove {
    0% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(5deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.login-banner {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.login-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.2;
    z-index: -1;
}

.banner-content {
    width: 100%;
    max-width: 600px;
    color: #fff;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
    max-height: 100vh;
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.banner-content h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(to right, #fff, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.5px;
    animation: slideInDown 1s ease-out;
    text-shadow: 0 0 30px rgba(167, 139, 250, 0.3);
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.banner-content p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
    line-height: 1.5;
    animation: slideInUp 1s ease-out;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.banner-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    text-align: left;
    margin-top: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    opacity: 0;
    animation: fadeInLeft 0.8s ease-out forwards;
}

.feature-item:nth-child(1) {
    animation-delay: 0.3s;
}

.feature-item:nth-child(2) {
    animation-delay: 0.6s;
}

.feature-item:nth-child(3) {
    animation-delay: 0.9s;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.feature-item i {
    font-size: 1.5rem;
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.1);
    padding: 0.6rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.feature-item:hover i {
    transform: scale(1.1) rotate(5deg);
    background: rgba(167, 139, 250, 0.2);
}

.feature-text h3 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
}

.feature-text p {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
    animation: none;
    line-height: 1.4;
}

.banner-illustration {
    position: absolute;
    bottom: -50px;
    right: -100px;
    width: 600px;
    height: 600px;
    opacity: 0.1;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    animation: float 10s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.action-prompt {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: pulse 2s infinite ease-in-out;
    animation-delay: 1.5s;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(167, 139, 250, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(167, 139, 250, 0);
    }
}

.action-prompt h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #a78bfa;
}

.action-prompt p {
    font-size: 1rem;
    margin: 0;
    animation: none;
}

.login-content {
    flex: 0 0 50%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
    animation: slideInRight 1s ease-out;
    overflow: auto;
    background: linear-gradient(180deg, #f7f8ff 0%, #ffffff 100%);
    padding: 40px 30px;
    touch-action: auto;
    transform-style: preserve-3d;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.forms-container {
    position: relative;
    width: 100%;
    max-width: 580px;
    height: auto;
    min-height: 820px;
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: min-height 0.6s ease-in-out;
}

.login-box, .register-box, .forgot-box {
    width: 100%;
    max-width: 580px;
    background: #ffffff;
    border-radius: 30px;
    padding: 40px 60px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: 
        transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        opacity 0.4s ease;
    overflow-y: visible;
    animation: boxAppear 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.register-box {
    height: auto;
    overflow: visible;
    transform: rotateY(180deg);
    z-index: 1;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-delay: 0s, 0.2s;
}

.login-box {
    transform: rotateY(0deg);
    z-index: 2;
    opacity: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.login-box.slide-out {
    transform: rotateY(-180deg);
    z-index: 1;
    opacity: 0;
    transition-delay: 0s, 0s;
}

.register-box.slide-in {
    transform: rotateY(0deg);
    z-index: 2;
    opacity: 1;
    transition-delay: 0s, 0.2s;
}

.forgot-box {
    transform: rotateY(180deg);
    z-index: 1;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition-delay: 0s, 0.2s;
}

.forgot-box.slide-in {
    transform: rotateY(0deg);
    z-index: 2;
    opacity: 1;
    transition-delay: 0s, 0.2s;
}

/* 调整转场动画 */
.register-box.slide-in, .login-box.slide-out, .forgot-box.slide-in {
  min-height: 100%;
  height: auto;
}

/* 确保转场时仍然可见 */
@media (max-width: 1024px) {
  .register-box {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(180deg) translateZ(0);
    position: absolute;
    top: 0;
    left: 0;
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.3s ease,
      visibility 0s 0.3s;
  }
  
  .register-box.slide-in {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg) translateZ(0);
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.5s ease 0.2s,
      visibility 0s 0s;
  }
  
  .login-box {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg) translateZ(0);
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.5s ease,
      visibility 0s 0s;
  }
  
  .login-box.slide-out {
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-180deg) translateZ(0);
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.3s ease,
      visibility 0s 0.3s;
  }
  
  .forgot-box {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(180deg) translateZ(0);
    position: absolute;
    top: 0;
    left: 0;
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.3s ease,
      visibility 0s 0.3s;
  }
  
  .forgot-box.slide-in {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg) translateZ(0);
    transition: 
      transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.5s ease 0.2s,
      visibility 0s 0s;
  }
}

/* 调整间距，让内容更紧凑 */
.register-box .el-form-item {
    margin-bottom: 8px !important;
}

.register-box .login-header {
    margin-bottom: 16px;
}

.register-box .logo {
    margin-bottom: 10px;
}

/* 减小输入框的高度 */
.register-box .custom-input :deep(.el-input__wrapper) {
    padding: 6px 14px;
}

.register-box .custom-input :deep(.el-input__inner) {
    height: 32px;
}

/* 调整验证码按钮高度 */
.register-box .verify-btn {
    height: 32px;
}

/* 减少表单元素间距 */
.register-box .modern-input-container {
    margin-bottom: 24px;
}

.register-box .modern-label {
    margin-bottom: 6px;
}

/* 调整注册按钮大小 */
.register-box .submit-btn {
    height: 42px;
    margin-top: 10px;
    margin-bottom: 8px;
}

/* 调整注册表单底部链接间距 */
.register-box .register-link {
    margin-top: 14px;
}

.login-header {
    text-align: center;
    margin-bottom: 20px;
}

.logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
    background: #fff;
    border-radius: 22px;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

h2 {
    font-size: 26px;
    margin-bottom: 4px;
    font-weight: 700;
    color: #1e293b;
    position: relative;
    display: inline-block;
}

.subtitle {
    color: #64748b;
    font-size: 15px;
    margin: 0;
}

.login-form {
    margin-top: 20px;
}

:deep(.el-form-item) {
    margin-bottom: 16px !important;
}

.custom-input {
    position: relative;
    margin-top: 8px;
}

.custom-input :deep(.el-input__wrapper) {
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 18px;
    padding: 8px 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.custom-input :deep(.el-input__wrapper)::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.6s;
}

.custom-input :deep(.el-input__wrapper:hover)::after {
    left: 100%;
}

.custom-input :deep(.el-input__wrapper:hover) {
    background: #fff;
    border-color: #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
    background: #fff;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.custom-input :deep(.el-input__inner) {
    height: 36px;
    font-size: 15px;
    color: #1e293b;
    padding-left: 8px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.custom-input :deep(.el-input__inner:focus) {
    transform: scale(1.01);
}

.custom-input :deep(.el-input__prefix-inner) {
    font-size: 18px;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper.is-focus .el-input__prefix-inner) {
    color: #6366f1;
    transform: scale(1.1);
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
    animation-delay: 0.4s;
}

.custom-checkbox {
    --el-checkbox-font-size: 14px;
    --el-checkbox-input-border-color: #e2e8f0;
}

.forgot-link {
    font-size: 14px;
    font-weight: 500;
    color: #6366f1;
    transition: all 0.3s ease;
}

.forgot-link:hover {
    color: #4f46e5;
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.submit-btn {
    width: 100%;
    height: 46px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 18px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 1px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
    animation-delay: 0.5s;
    margin-bottom: 15px;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: 0.5s;
}

.submit-btn:hover::before {
    left: 100%;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
    letter-spacing: 1.5px;
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}

.btn-hover {
    animation: pulse-btn 0.6s ease-in-out;
}

@keyframes pulse-btn {
    0% {
        transform: scale(1) translateY(-3px);
    }
    50% {
        transform: scale(1.05) translateY(-4px);
    }
    100% {
        transform: scale(1) translateY(-3px);
    }
}

.register-link {
    text-align: center;
    color: #64748b;
    font-size: 14px;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
    animation-delay: 0.6s;
}

.register-link a {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.register-link a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6366f1;
    transition: width 0.3s ease;
}

.register-link a:hover::after {
    width: 100%;
}

.el-select :deep(.el-input__wrapper) {
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.el-select :deep(.el-input__wrapper:hover) {
    background: #fff;
    transform: translateY(-2px);
}

.el-select :deep(.el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 1px #6366f1 inset;
}

.el-select :deep(.el-select__tags) {
    background-color: transparent;
}

.input-focus-animate {
    animation: pulse-input 1s ease infinite;
}

@keyframes pulse-input {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

.el-form-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

.el-form-item:nth-child(1) {
    animation-delay: 0.1s;
}

.el-form-item:nth-child(2) {
    animation-delay: 0.2s;
}

.el-form-item:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 注册表单特有的样式 */
.code-input {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0;
}

.code-input .el-input {
    flex: 1;
}

.verify-btn {
    white-space: nowrap;
    height: 36px;
    border-radius: 12px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border: none;
    color: white;
    font-weight: 500;
}

.verify-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.verify-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: not-allowed;
}

/* 注册/登录切换动画相关 */
.register-btn, .login-btn {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-block;
    margin-left: 4px;
}

.register-btn::before, .login-btn::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.register-btn:hover::before, .login-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.register-btn:hover, .login-btn:hover {
    text-shadow: 0 0 8px rgba(99, 102, 241, 0.4);
    letter-spacing: 0.5px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

.login-btn:active, .register-btn:active {
    animation: bounce 0.5s;
}

/* 确保注册表单的内容显示完整 */
.login-content {
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 移动设备响应式调整 */
@media (max-width: 1024px) {
    .login-container {
        flex-direction: column;
    }
    
    .login-banner {
        flex: 0 0 auto;
        padding: 20px;
        display: none;
    }
    
    .login-content {
        flex: 1;
        padding: 20px;
    }
    
    .forms-container {
        max-width: 100%;
    }
    
    .login-box, .register-box, .forgot-box {
        width: 100%;
        max-width: 100%;
        padding: 30px;
    }
}

/* 调整最后一个表单项的边距 */
.el-form-item:last-of-type {
    margin-bottom: 12px !important;
}

/* 特别针对注册表单进行优化 */
.register-box .register-link {
    margin-top: 14px;
}

/* 确保内容垂直居中 */
.login-content {
    align-items: center;
    justify-content: center;
}

/* 优化确认密码字段布局 */
.register-box .el-form-item:nth-child(4) {
    margin-bottom: 22px;
}

/* 为了防止内容溢出，调整移动设备上的样式 */
@media (max-height: 800px) {
    .forms-container {
        min-height: auto;
        height: auto;
    }
    
    .login-box, .register-box, .forgot-box {
        position: relative;
        padding: 25px 35px;
    }
    
    .logo {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }
    
    h2 {
        font-size: 20px;
    }
    
    .login-header {
        margin-bottom: 14px;
    }
    
    .submit-btn {
        height: 40px;
        font-size: 16px;
    }
    
    .register-box .el-form-item {
        margin-bottom: 5px !important;
    }
    
    .register-box .modern-input-container {
        margin-bottom: 16px;
    }
    
    .register-box .verify-btn {
        height: 30px;
        font-size: 13px;
    }
}

/* 移除不必要的动画效果，减少视觉空间浪费 */
h2::after {
    display: none;
}

/* 注册表单的特殊样式 */
.register-box .submit-btn {
    margin-top: 5px;
    margin-bottom: 10px;
}

.register-box .el-form-item:nth-child(4),
.register-box .el-form-item:nth-child(3) {
    margin-bottom: 10px !important;
}

.school-select-item {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-bottom: 24px; 
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 20px;
    transition: all 0.3s ease;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.school-select-item:hover {
    background: #f9fafb;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.school-select-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
    margin-top: 16px;
    position: relative;
    z-index: 10;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.modern-school-select {
    width: 100%;
    transform-style: preserve-3d;
    transform: perspective(800px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.select-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.select-icon-wrapper i {
    font-size: 18px;
    color: #6366f1;
}

.select-focus-animate {
    animation: float-select 3s ease-in-out infinite;
}

@keyframes float-select {
    0% {
        transform: perspective(800px) translateY(0px) rotateX(0deg) scale(1);
        box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
    }
    25% {
        transform: perspective(800px) translateY(-5px) rotateX(2deg) scale(1.02);
        box-shadow: 0 15px 25px rgba(99, 102, 241, 0.3);
    }
    50% {
        transform: perspective(800px) translateY(-8px) rotateX(4deg) scale(1.03);
        box-shadow: 0 25px 35px rgba(99, 102, 241, 0.35);
    }
    75% {
        transform: perspective(800px) translateY(-5px) rotateX(2deg) scale(1.02);
        box-shadow: 0 15px 25px rgba(99, 102, 241, 0.3);
    }
    100% {
        transform: perspective(800px) translateY(0px) rotateX(0deg) scale(1);
        box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
    }
}

:deep(.modern-school-select .el-input__wrapper) {
    background: transparent;
    border: none;
    box-shadow: none !important;
    padding: 0;
}

:deep(.modern-school-select .el-input__wrapper:hover),
:deep(.modern-school-select .el-input__wrapper.is-focus) {
    background: transparent;
    border: none;
    box-shadow: none !important;
    transform: none;
}

:deep(.modern-school-select .el-input__inner) {
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #1e293b;
    padding: 0;
    transition: all 0.3s ease;
}

:deep(.modern-school-select .el-input__suffix) {
    right: 0;
}

:deep(.modern-school-select .el-input__suffix-inner) {
    color: #6366f1;
    transition: all 0.4s ease;
}

:deep(.modern-school-select .el-input__wrapper.is-focus .el-input__suffix-inner) {
    color: #4338ca;
    transform: rotate(180deg);
}

/* 动画效果 */
.select-focus-animate {
    animation: pulse-border 2s infinite ease-out;
}

@keyframes pulse-border {
    0% {
        border-color: #e5e7eb;
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.03),
            0 2px 4px rgba(0, 0, 0, 0.02);
    }
    50% {
        border-color: #818cf8;
        box-shadow: 
            0 8px 20px rgba(99, 102, 241, 0.1),
            0 4px 8px rgba(0, 0, 0, 0.04);
    }
    100% {
        border-color: #e5e7eb;
        box-shadow: 
            0 4px 12px rgba(0, 0, 0, 0.03),
            0 2px 4px rgba(0, 0, 0, 0.02);
    }
}

/* 修改处理选中后的展示样式 */
.modern-school-select.is-selected :deep(.el-input__inner) {
    color: #4338ca;
    font-weight: 600;
}

/* 优化下拉箭头区域 */
:deep(.modern-school-select .el-input__suffix) {
  right: 0;
  transition: all 0.3s ease;
}

:deep(.modern-school-select .el-input__suffix-inner) {
  color: #6366f1;
  transition: all 0.3s ease;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(237, 233, 254, 0.5);
  border-radius: 8px;
}

:deep(.modern-school-select:hover .el-input__suffix-inner) {
  background: rgba(224, 217, 252, 0.8);
  transform: scale(1.05);
}

:deep(.modern-school-select .el-input__wrapper.is-focus .el-input__suffix-inner) {
  color: #4338ca;
  background: rgba(199, 189, 253, 0.8);
  transform: rotate(180deg) scale(1.05);
}

/* 选择框内的文本样式 */
:deep(.modern-school-select .el-input__inner) {
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  padding: 0;
  transition: all 0.3s ease;
}

:deep(.modern-school-select .el-input__inner::placeholder) {
  color: #94a3b8;
  font-weight: 400;
  opacity: 0.8;
}

:deep(.modern-school-select:hover .el-select__placeholder) {
  color: #64748b;
}

/* 激活状态的选择器容器 */
.modern-select-wrapper.select-focus-animate {
  border-color: #818cf8;
  background-color: rgba(251, 251, 254, 0.9);
}

/* 修改滑动动效 */
.modern-select-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 90%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: all 0.8s ease;
  opacity: 0;
}

.modern-select-wrapper:hover::before {
  animation: shine-effect 1.8s ease;
}

@keyframes shine-effect {
  0% {
    left: -200%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 200%;
    opacity: 0;
  }
}

/* 添加选择器容器的视觉深度 */
.modern-select-wrapper {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 18px;
  padding: 8px 16px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.modern-select-wrapper:hover {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* 添加选中状态的样式 */
.modern-school-select.is-selected + .el-input__suffix .el-input__suffix-inner {
  background: rgba(224, 217, 252, 0.8);
}

.modern-school-select.is-selected :deep(.el-input__inner) {
  color: #4338ca;
  font-weight: 600;
}

/* 未选择学校时的提示样式优化 */
:deep(.el-select__placeholder) {
  color: #94a3b8;
  font-size: 15px;
  transition: all 0.3s ease;
}

:deep(.modern-school-select:hover .el-select__placeholder) {
  color: #64748b;
}

.modern-input-container {
  margin-bottom: 32px;
  position: relative;
  z-index: 10;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modern-input-container:hover {
  transform: translateY(-2px);
}

.modern-label {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #6366f1;
  letter-spacing: 0.3px;
  padding-left: 12px;
  position: relative;
  transition: all 0.3s ease;
}

.modern-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  height: 12px;
  width: 3px;
  background: linear-gradient(to bottom, #6366f1, #818cf8);
  border-radius: 4px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.modern-input-container:hover .modern-label {
  color: #4f46e5;
  transform: translateX(3px);
}

.modern-input-container:hover .modern-label::before {
  height: 16px;
  opacity: 1;
}

.modern-select-wrapper {
  display: flex;
  align-items: center;
  background: #f8fafc;
  border-radius: 18px;
  padding: 8px 16px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
}

.modern-select-wrapper:hover {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.modern-select-wrapper.select-focus-animate {
  border-color: #6366f1;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  transition: all 0.4s ease;
}

.school-icon {
  width: 20px;
  height: 20px;
  color: #6366f1;
  transition: all 0.4s ease;
}

.modern-select-wrapper:hover .school-icon {
  color: #4f46e5;
  transform: scale(1.1);
}

.modern-school-select {
  flex: 1;
}

/* 下拉选项样式 */
:global(.modern-select-dropdown) {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 8px;
}

:global(.modern-select-dropdown .el-select-dropdown__item) {
  height: 42px;
  line-height: 42px;
  font-size: 15px;
  padding: 0 16px;
  border-radius: 10px;
  margin: 4px 0;
  transition: all 0.3s ease;
}

:global(.modern-select-dropdown .el-select-dropdown__item:hover) {
  background-color: rgba(237, 233, 254, 0.5);
}

:global(.modern-select-dropdown .el-select-dropdown__item.selected) {
  font-weight: 600;
  color: #4338ca;
  background-color: rgba(99, 102, 241, 0.12);
  position: relative;
}

:global(.modern-select-dropdown .el-select-dropdown__item.selected::before) {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  background: #6366f1;
  border-radius: 2px;
  opacity: 0.8;
}

:global(.modern-select-dropdown .el-select-dropdown__wrap) {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}

:global(.modern-select-dropdown .el-select-dropdown__wrap::-webkit-scrollbar) {
  width: 4px;
}

:global(.modern-select-dropdown .el-select-dropdown__wrap::-webkit-scrollbar-track) {
  background: transparent;
}

:global(.modern-select-dropdown .el-select-dropdown__wrap::-webkit-scrollbar-thumb) {
  background-color: rgba(99, 102, 241, 0.3);
  border-radius: 10px;
  border: none;
}

:global(.modern-select-dropdown .el-select-dropdown__wrap::-webkit-scrollbar-thumb:hover) {
  background-color: rgba(99, 102, 241, 0.5);
}
</style>